
<template>
  <div>
        <Card :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page :current.sync="pageNumber" :total="total" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card>
        <Modal title="使用情况" v-model="modal_use" class="no_footer_modal">
            <Form :label-width="120" style="padding:15px 30px;">
                <FormItem label="使用该模板的客户：">
                    <Table :loading="list.loading" :show-header='false'  :columns="list.columns" :data="list.data"></Table>
                    <Page :total="list.total" show-total  @on-change="listpageChange" ></Page>
                </FormItem>
            </Form>
        </Modal>
        <Modal title="编辑备注"  v-model="modal_edit"  :mask-closable="false" >
            <Form :model="edit_remarks" :label-width="80" style="padding:15px 30px;">
                <FormItem label="模板名称*">
                    <Input v-model="edit_remarks.title" :maxlength="20"></Input>
                </FormItem>
              
                <FormItem label="备注">
                     <Input v-model="edit_remarks.remarks" :maxlength="20"></Input>
                </FormItem>
            </Form>
            
            <div slot="footer">
                <div class="zh-flex zh-flex-5" >
                    <Button @click="modal_edit=false" type="ghost">取消</Button>
                    <Button @click="save" class="zh-hollow" type="primary" >保存</Button>
                </div>
            </div>
        </Modal>
        <Modal :title="tempD.title" v-model="modal_temp" class="no_footer_modal">
            <Tabs type="card">
                <TabPane v-for="(item,index) in tempD.tablabel" :key="index" :label="item.name" style="padding:15px 30px;">
                    
                        <div v-if="item.name!='意见与建议'" class="tempList-item" v-for="(child,num) in item.children" :key="num">
                            <p style="marginBottom:10px;">{{child.name}}</p>
                            <p  style="marginBottom:10px;" v-if="!!child.normal">{{child.normal}}</p>
                            <RadioGroup style="marginBottom:10px;"  type="button">
                                <Radio :label="child.good_text"></Radio>
                                <Radio :label="child.bad_text"></Radio>
                            </RadioGroup>
                            <Input readonly :placeholder="child.prompt"></Input>
                        </div>                       
                        <div v-else style="background:#eee"></div>
        
                </TabPane>
                
            </Tabs>
        </Modal>
  </div>
</template>

<script>
import util from '@/libs/util.js'
import {getInspTemp,changeInsptemp} from '@/libs/post.js'
import {getUserInfoList,getTempDetails} from '@/libs/get.js'
export default {
    name:'insTemp',
    data () {
        return {
            btnp:{},
            btn:{
                xjmban_ckmb:false,
                xjmban_syqk:false,
                xjmban_bjbz:false
            },
            canSave:true,
            pageSize:10,
            pageNumber:1,
            modal_temp:false,
            tempD:{},
            edit_remarks:{
                title:'',
                remarks:'',
                uuid:''
            },
            modal_edit:false,
            modal_use_cus:[],
            modal_use:false,
            list:{
                total:0,
                pageSize:10,
                pageNumber:1,
                uuid:'' ,
                loading:false,
                data:[],
                columns:[{
                    key:'name'
                }]         
            },
            loading:true,
            total:0,
            columns:[
                {
                    key:'name',
                    title:'巡检模板',
                    minWidth:200,
                    fixed:'left',
                },
                {
                    key:'remark',
                    title:'备注',
                    minWidth:200
                  
                },
                {
                    key:'time',
                    title:'新增时间',
                    align:'center',
                    minWidth:150
                },
                {
                    key:'action',
                    title:'操作',
                    align:'center',
                    minWidth:250,
                    fixed:'right',
                    render:(h,params)=>{
                        return h('div',[
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.xjmban_ckmb?'inline-block':'none'
                                },
                                on:{
                                    click:()=>{
                                        
                                        this.viewTemp(params.row.uuid)
                                    }
                                }
                            },'查看模板 '),
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.xjmban_syqk?'inline-block':'none'
                                },
                                on:{
                                    click:()=>{
                                        this.modal_use=true;
                                            this.list.uuid=params.row.uuid;
                                            this.getList();
                                    }
                                }
                            },'使用情况 '),
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.xjmban_bjbz?'inline-block':'none'
                                },
                                on:{
                                    click:()=>{
                                        this.modal_edit=true;
                                        this.edit_remarks={
                                            title:params.row.name,
                                            remarks:params.row.remark,
                                            uuid:params.row.uuid
                                        }
                                       
                                    }
                                }
                            },'编辑备注 '),
                        ])
                    }
                }
            ],
            data:[
                {
                    temp:'监控报警系统定期维护保养报告',
                    remarks:'ssss',
                    time:'2017-03-09 18:00',
                    customers:['12313','sffwef']
                }
            ]
        };
    },
    methods:{
        async viewTemp(uuid){
            let res=await getTempDetails(uuid);
            let response=res.data;
            if(response.code===200){
                this.modal_temp=true;
                this.tempD=response.data;
                this.tempD.tablabel.push({name:'意见与建议'})
            }else{
                this.$Notice.error({
                title: '请求出错',
                desc:response.msg
                });
            }
        },
        async save(){
            if(this.canSave){
                this.canSave=false;
                if(!this.edit_remarks.title){
                    this.$Notice.error({
                        desc:'请输入模板名称'
                    })
                }else{
                    let uuid=this.edit_remarks.uuid;
                    let remark=this.edit_remarks.remarks;
                    let name=this.edit_remarks.title;
                    let res=await changeInsptemp({uuid,name,remark});
                    let response=res.data;
                    if(response.code===200){
                        this.$Notice.success({
                            desc:'已保存'
                        });
                        this.getTable();
                        this.modal_edit=false;
                    }else{
                        this.$Notice.error({
                        title: '失败',
                        desc:response.msg
                        });
                    }
                }
                this.canSave=true;
            }
        },
        async getTable(){
            this.loading=true;
            let pageSize=this.pageSize;
            let pageNumber=this.pageNumber;
            let res=await getInspTemp({pageSize,pageNumber});
            let response=res.data;
            if(response.code===200){
                this.total=response.data.total;
                this.data=response.data.rows.map(item=>{
                    item.time=item.created.slice(0,16);
                    return item
                })
                this.loading=false;
            }else{
                this.$Notice.error({
                title: '失败',
                desc:response.msg
                });
            }
        },
        pageSizeChange(size){
            //回到第一页
            this.pageNumber=1;
            this.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.pageNumber=number;
            this.getTable();
        },
        async getList(){
            this.list.loading=true;
            let pageSize=this.list.pageSize;
            let pageNumber=this.list.pageNumber;
            let uuid=this.list.uuid;
            let res=await getUserInfoList(pageSize,pageNumber,uuid);
            let response=res.data;
            if(response.code===200){
                this.list.total=response.data.total;
                this.list.data=response.data.rows;
                this.list.loading=false;
            }else{
                this.$Notice.error({
                title: '失败',
                desc:response.msg
                })
            }
        },
        listpageChange(number){
            this.list.pageNumber=number;
            this.getList();
        },
    },
    created(){
        this.getTable();
        this.btnp=util.bpower(this,this.btn);
    }

}

</script>
<style lang='scss' >
.tempList-item+.tempList-item{
    padding-top:10px;
    margin-top:10px;
    border-top:1px solid #eee;
}
</style>